<template>
  <ul class="pagination">
    <li class="page-item" :class="{ disabled: activePage <= 1 }"><a class="page-link" href="#"
        @click="previousPage()">Previous</a></li>
    <li v-for=" num in pageNumber" :key="num" class="page-item"
      :class="{ active: activePage === num }" @click="chagePage(num)">
      <a class="page-link" href="#">{{ num
        }}</a>
    </li>
    <li class="page-item " :class="{ disabled: activePage >= pageNumber }" @click="nextPage()"><a
        class="page-link" href="#">Next</a></li>
  </ul>

</template>

<script setup>
import { computed, ref, watch } from 'vue';
const props = defineProps(['total', 'pageSize']);

const activePage = defineModel();

/* 修改当前激活page */
function chagePage(num) {
  activePage.value = num;
}

function nextPage() {
  if (activePage.value < pageNumber.value) {
    activePage.value++
  }
}
function previousPage() {
  if (activePage.value > 1) {
    activePage.value--
  }
}


/* 计算页码 */
const pageNumber = computed(() => Math.ceil(props.total / props.pageSize));
</script>

<style></style>